<template>
  <CardDialog v-model:visible="show" width="80%" title="策略配置">
    <div class="table-head">
      <a-button class="card-btn" type="default" style="margin-bottom: 15px" @click="handleCreate">添加策略</a-button>
    </div>
    <div class="radar-content">
      <a-table
        class="crud-table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :loading="loading"
        :scroll="{ x: '100%', y: 'calc(100vh - 310px)' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'isEnabled'">
            <a-tag :color="record.isEnabled ? 'green' : 'red'">
              {{ record.isEnabled ? '启用' : '禁用' }}
            </a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'areaIds'">
            <a-tooltip>
              <template #title>{{ showAreaNames(record.areaIds) }}</template>
              <div class="ids-card">
                {{ showAreaNames(record.areaIds) }}
              </div>
            </a-tooltip>
          </template>
          <template v-else-if="column.dataIndex === 'policyType'">
            {{ getDictLabel(record.policyType, policyTypeList, { value: 'value', label: 'name' }) }}
          </template>
          <template v-else-if="column.dataIndex === 'alarmType'">
            {{ getDictLabel(record.alarmType, alarmTypeList, { value: 'value', label: 'name' }) }}
          </template>
          <template v-else-if="column.dataIndex === 'bridgeId'">
            {{ bridgeObj[record.bridgeId] }}
          </template>
          <template v-else-if="column.dataIndex === 'maxSpeed'">
            {{ record.maxSpeed !== null ? record.maxSpeed + '节' : '' }}
          </template>
          <template v-else-if="column.dataIndex === 'minSpeed'">
            {{ record.minSpeed !== null ? record.minSpeed + '节' : '' }}
          </template>
          <template v-else-if="column.dataIndex === 'safeHeight'">
            {{ record.safeHeight !== null ? record.safeHeight + '米' : '' }}
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button type="text" size="small" class="operat-button" @click="handleUpdate(record)">编辑</a-button>
            <a-button type="text" size="small" class="operat-button" @click="handleDelete(record)">删除</a-button>
          </template>
        </template>
      </a-table>

      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :defaultPageSize="queryForm.size"
          v-model:current="queryForm.current"
          v-model:pageSize="queryForm.size"
          :total="total"
          @change="onload"
          @showSizeChange="onload"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </div>
    <formDialog ref="formRef" @onload="onload" :bridgeList="bridgeList" :areaList="areaList" />
  </CardDialog>
</template>
<script setup>
  import { ref } from 'vue';
  import CardDialog from '/@/components/cardDialog/index.vue';
  import { api } from '/@/api/plat/policy.js';
  import { api as bridgeApi } from '/@/api/plat/bridge.js';
  import { api as areaApi } from '/@/api/plat/area.js';
  import formDialog from './form.vue';
  import { PageMixin } from '/@/utils/mixin';
  import { columns } from './options.js';
  import { policyTypeList, alarmTypeList } from '/@/config/strategy.js';
  import { getDictLabel } from '/@/utils/methods.js';
  const { deleteFn } = PageMixin();

  let show = ref(false);
  const formRef = ref();
  const tableData = ref([]);
  const bridgeList = ref([]);
  const bridgeObj = ref({});
  const areaList = ref([]);
  const areaObj = ref({});
  let loading = ref(false);
  const queryFormState = {
    current: 1,
    size: 10,
  };
  const total = ref(0);
  const queryForm = ref({ ...queryFormState });

  function queryData() {
    queryForm.value.current = 1;
    onload();
  }

  function onload() {
    loading.value = true;
    api.queryPage(queryForm.value).then(({ data }) => {
      tableData.value = data.records;
      total.value = data.total;
      loading.value = false;
    });
  }

  function handleCreate() {
    formRef.value.open();
  }

  function handleUpdate(row) {
    formRef.value.open(row);
  }

  function handleDelete(data) {
    deleteFn(data, api.delete, 'policyId').then(() => {
      onload();
    });
  }

  function open() {
    show.value = true;
    // 获取桥梁
    bridgeApi.queryList().then(({ data }) => {
      bridgeObj.value = data.reduce((acc, item) => {
        acc[item.bridgeId] = item.bridgeName;
        return acc;
      }, {});
      bridgeList.value = data;
    });
    // 获取区域
    areaApi.queryList().then(({ data }) => {
      areaObj.value = data.reduce((acc, item) => {
        acc[item.areaId] = item.areaName;
        return acc;
      }, {});
      areaList.value = data;
    });
    queryData();
  }

  function showAreaNames(list) {
    const names = list.map((m) => areaObj.value[m]);
    return names.join(',');
  }

  defineExpose({
    open,
  });
</script>

<style lang="less" scoped>
  @import './index.less';
  @import '/@/assets/style/table.less';
</style>
